<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card style="color:#409EFF">
          <div><i class="el-icon-user-solid"></i>用户总数：</div>
          <div class="text">{{ userNum }} 人</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color:#67C23A">
          <div><i class="el-icon-s-goods"></i>商品品种：</div>
          <div class="text">{{ goodsNum }} 种</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color:#E6A23C">
          <div><i class="el-icon-s-home"></i>商品库存总数：</div>
          <div class="text">{{ totalInventory }} 件</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color:#F56C6C">
          <div><i class="el-icon-money"></i>总销售额：</div>
          <div class="text">{{ totalSales }} 元</div>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin: 20px">
      <el-col :span="14">
        <div id="main" style="width: 650px; height: 400px"></div>
      </el-col>
      <el-col :span="10">
        <div id="pie" style="width: 500px; height: 400px"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import request from "@/utils/request";

export default {
  name: "Home",
  data() {
    return {
      userNum: 0,
      totalSales: 0,
      totalInventory: 0,
      goodsNum: 0,
      cateGory: [],
      cateGoryInventory: [],
      goodsNames: [],
      goodsSales: [],
      option: {
        title: {
          text: '各类别商品库存情况',
          subtext: '库存情况图',
          left: 'center'
        },
        label: {
          show: true,	// 是否可见
          position: 'top' // 显示位置
        },
        xAxis: {
          type: 'category',
          data: [],
          name: "商品类别",
        },
        yAxis: {
          type: 'value',
          name: "单位（件）",
        },
        series: [
          {
            data: [],
            type: 'bar'
          },
        ]
      },
      pieOption: {
        title: {
          text: '各商品销售额统计',
          subtext: '比例图',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}元'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name:'销售额',
            type: 'pie',
            radius: '70%',
            label: {            //饼图图形上的文本标签
              normal: {
                show: true,
                position: 'inner', //标签的位置
                textStyle: {
                  fontWeight: 300,
                  fontSize: 14,    //文字的字体大小
                  color: "#fff"
                },
                formatter: '{d}%'
              }
            },
            data: [],  // 填空
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    };
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      request.get("/main/info").then(res => {
        this.userNum = res.userNum
        this.totalSales = res.totalSales
        this.goodsNum = res.goodsNum
        this.totalInventory = res.totalInventory
        this.cateGory = Object.keys(res.goodsInfo)
        this.cateGoryInventory = Object.values(res.goodsInfo)
        this.goodsNames = Object.keys(res.salesInfo)
        this.goodsSales = Object.values(res.salesInfo)
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        this.option.xAxis.data = this.cateGory
        this.option.series[0].data = this.cateGoryInventory
        myChart.setOption(this.option)

        var pietDom = document.getElementById('pie');
        var pieChart = echarts.init(pietDom);
        var pieDate=[]
        for (var i=0;i<this.goodsNames.length;i++){
          pieDate.push({name:this.goodsNames[i],value:this.goodsSales[i]})
        }
        console.log(pieDate)
        this.pieOption.series[0].data=pieDate
        pieChart.setOption(this.pieOption)
      })

    }
  }
}
</script>

<style scoped>
.text {
  margin: 10px auto;
  text-align: center
}
</style>